<script lang="ts" setup>
import ComHeader from '../../components/Header.vue';
import ComFooter from '../../components/Footer.vue';
const richs = [
  {
    img: new URL('@assets/rich/1.png', import.meta.url).href,
    text: '互联网',
  },
  {
    img: new URL('@assets/rich/2.png', import.meta.url).href,
    text: '金融',
  },
  {
    img: new URL('@assets/rich/3.png', import.meta.url).href,
    text: '保险',
  },
  {
    img: new URL('@assets/rich/4.png', import.meta.url).href,
    text: '物流',
  },
  {
    img: new URL('@assets/rich/5.png', import.meta.url).href,
    text: '汽车',
  },
  {
    img: new URL('@assets/rich/6.png', import.meta.url).href,
    text: '院校',
  },
  {
    img: new URL('@assets/rich/7.png', import.meta.url).href,
    text: '电子商务',
  },
  {
    img: new URL('@assets/rich/8.png', import.meta.url).href,
    text: '游戏',
  },
];
const businesss = [
  {
    img: new URL('@assets/business/1.png', import.meta.url).href,
    title: '营销',
    text: '活跃号筛选评估，便于用户画像建模，实现营销差异化',
  },
  {
    img: new URL('@assets/business/2.png', import.meta.url).href,
    title: '注册',
    text: '个人、企业用户身份信息核验、风险评估',
  },
  {
    img: new URL('@assets/business/3.png', import.meta.url).href,
    title: '交易',
    text: '反“薅羊毛”，多重核验保证交易人身份',
  },
];
</script>

<template>
  <section class="page">
    <ComHeader></ComHeader>
    <main class="page__main">
      <section class="banner">
        <p class="banner__text">高效、合规、安全的</p>
        <p class="banner__text">数据要素API接口服务</p>
      </section>
      <section class="rich">
        <h2 class="title">丰富的数据接口</h2>
        <ul class="rich__items">
          <li class="rich__item" v-for="item in richs">
            <img class="rich__img" :src="item.img" :alt="item.text" />
            <p class="rich__text">{{ item.text }}</p>
          </li>
        </ul>
      </section>
      <section class="business">
        <h2 class="title">解决您的业务痛点</h2>
        <ul class="business__items">
          <li class="business__item" v-for="item in businesss">
            <img class="business__img" :src="item.img" :alt="item.title" />
            <h3 class="business__title">{{ item.title }}</h3>
            <p class="business__text">{{ item.text }}</p>
          </li>
        </ul>
      </section>
      <section class="safety">
        <h2 class="title">数据安全有保障</h2>
        <div class="safety__con">
          <h3 class="safety__title">“三真审核”准入机制</h3>
          <p class="safety__tip">有效保障数据应用的合法合规</p>
          <ul class="safety__items">
            <li class="safety__item">
              <img class="safety__img" src="@assets/safety1.jpg" alt="真实企业" />
              <p class="safety__text">真实企业</p>
            </li>
            <li class="safety__item">
              <img class="safety__img" src="@assets/safety2.jpg" alt="真实应用场景" />
              <p class="safety__text">真实应用场景</p>
            </li>
            <li class="safety__item">
              <img class="safety__img" src="@assets/safety3.jpg" alt="真实用户授权" />
              <p class="safety__text">真实用户授权</p>
            </li>
          </ul>
          <h3 class="safety__title">零存储策略</h3>
          <img class="safety__sign" src="@assets/zero.png" alt="零存储策略" />
        </div>
      </section>
      <section class="service">
        <h2 class="title">高并发集群服务</h2>
        <div class="service__con">
          <p>大规模集群服务，全面支持高并发场景</p>
        </div>
      </section>
      <section class="custom">
        <h2 class="title">个性化定制服务</h2>
          <p class="custom__text">可根据客户业务需求定制API接口</p>
        <div class="custom__con">
          <img class="custom__img" src="@assets/custom.png" alt="个性化定制服务" />
        </div>
      </section>
    </main>
    <ComFooter />
  </section>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: 'AaWuHunTi';
  src: url('@assets/font/AaWuHunTi.ttf');
}
.page {
  position: relative;
  color: #333333;
  background-color: #f5f5f5;

  &__main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.title {
  font-size: 28px;
  text-align: center;
  font-weight: 500;
  line-height: 48px;
}
.banner {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('@assets/index.jpg');
  background-size: 100% 100%;
  color: #fff;
  background-color: #1e4194;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #13498e, $alpha: 0.65);
  }

  @at-root &__text {
    z-index: 1;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: 88px;
    letter-spacing: 2px;
    // text-shadow: 4px 6px 8px #02070e;
  }
}
.rich {
  padding-top: 80px;
  position: relative;
  width: 1200px;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('@assets/rich.png');
  background-size: 800px;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;

  &::after {
    content: '';
    position: absolute;
    bottom: -446px;
    left: 50%;
    transform: translateX(-50%);
    width: 860px;
    height: 800px;
    border: 2px solid rgba($color: #badaf4, $alpha: 0.35);
    border-radius: 50%;
  }

  @at-root &__items {
    z-index: 1;
    margin-top: 60px;
    position: relative;
    width: 100%;
    height: 100%;
  }

  @at-root &__item {
    position: absolute;
    display: flex;
    align-items: center;

    &:nth-child(1) {
      flex-direction: row-reverse;
      left: 56px;
      bottom: 0px;
    }
    &:nth-child(2) {
      flex-direction: row-reverse;
      left: 124px;
      bottom: 126px;
    }
    &:nth-child(3) {
      flex-direction: row-reverse;
      left: 226px;
      bottom: 236px;
    }
    &:nth-child(4) {
      flex-direction: row-reverse;
      left: 400px;
      bottom: 314px;
    }
    &:nth-child(5) {
      right: 400px;
      bottom: 314px;
    }
    &:nth-child(6) {
      right: 226px;
      bottom: 236px;
    }
    &:nth-child(7) {
      right: 94px;
      bottom: 126px;
    }
    &:nth-child(8) {
      right: 70px;
      bottom: 0px;
    }
  }

  @at-root &__img {
    width: 64px;
    height: 64px;
    background-color: #0e52a7;
    border-radius: 50%;
  }

  @at-root &__text {
    padding: 0 20px;
    font-size: 16px;
    line-height: 64px;
    color: #000;
  }
}
.business {
  margin-top: 80px;
  padding-top: 80px;
  padding-bottom: 60px;
  width: 100%;
  color: #ffffff;
  background-color: #0e52a7;

  @at-root &__items {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }

  @at-root &__item {
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
  }

  @at-root &__img {
    width: 48px;
    height: 48px;
  }

  @at-root &__title {
    font-size: 18px;
    line-height: 64px;
  }

  @at-root &__text {
    font-size: 15px;
    text-align: center;
    line-height: 24px;
  }
}
.safety {
  padding-top: 80px;

  @at-root &__con {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @at-root &__title {
    margin-top: 60px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
  }

  @at-root &__tip {
    font-size: 15px;
    text-align: center;
    line-height: 42px;
    color: #999;
  }

  @at-root &__items {
    margin-top: 12px;
    width: 1000px;
    display: flex;
    justify-content: space-between;
  }

  @at-root &__item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba($color: #ffffff, $alpha: 0.35);
    box-shadow: 2px 4px 10px #e5e8ec;
  }

  @at-root &__img {
    display: block;
    width: 320px;
  }

  @at-root &__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    line-height: 44px;
    letter-spacing: 2px;
    color: #ffffff;
    background-color: rgba($color: #000000, $alpha: 0.65);
  }

  @at-root &__sign {
    margin-top: 60px;
    width: 600px;
  }
}
.service {
  position: relative;
  margin-top: 80px;
  padding-top: 80px;
  padding-bottom: 60px;
  width: 100%;
  height: 240px;
  color: #ffffff;
  background-color: #13191d;
  background-image: url('@assets/service.jpg');
  background-size: 50%;
  background-position: center;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background-color: rgba($color: #0e52a7, $alpha: 0.35);
  }

  .title {
    position: relative;
    z-index: 1;
  }

  @at-root &__con {
    z-index: 1;
    position: relative;
    margin-top: 60px;
    font-family: "黑体";
    font-size: 52px;
    font-weight: bold;
    text-align: center;
  }
}
.custom {
  margin-top: 80px;
  padding-bottom: 80px;

  @at-root &__con {
    margin-top: 60px;
  }

  @at-root &__img {
    width: 400px;
  }

  @at-root &__text {
    font-size: 15px;
    text-align: center;
    line-height: 48px;
    color: #666666;
  }
}
</style>
